<template>
  <Form>
    <Row :gutter="15">
      <Col :span="6">
      <Form.Item label="股票">
        <Select v-model:value="currentShare" :options="shares" @change="RenderMetric" />
      </Form.Item>
      </Col>
      <Col :span="2">
      <Button type="primary" shape="round" href="/#/shares">
        <LeftOutlined /> 返回
      </Button>
      </Col>
      <Col id="cutdownContainer" :span="16" style="display: flex; align-items:center;justify-content: space-between;">
      </Col>
    </Row>
  </Form>
  <Suspense>
    <Tabs style="margin-top: 10px" @change="tabChanged">
      <Tabs.TabPane key="trendChart" tab="走势图" :style="panelStyle">
        <component :is="components.chart" :code="currentShare" :contentWidth="contentWidth" :contentHeight="contentHeight" />
      </Tabs.TabPane>
      <Tabs.TabPane key="company" tab="公司信息" :style="panelStyle">
        <component :is="components.company" :code="currentShare" :contentHeight="contentHeight" />
      </Tabs.TabPane>
      <Tabs.TabPane key="snowman" tab="公司高管" :style="panelStyle">
        <component :is="components.skholders" :code="currentShare" :contentHeight="contentHeight" />
      </Tabs.TabPane>
      <Tabs.TabPane key="topHolders" tab="十大股东" :style="panelStyle">
        <component :is="components.topHolders" :code="currentShare" :contentHeight="contentHeight" />
      </Tabs.TabPane>
      <Tabs.TabPane key="income" tab="利润表" :style="panelStyle">
        <component :is="components.income" :code="currentShare" :contentHeight="contentHeight" />
      </Tabs.TabPane>
      <Tabs.TabPane key="bonus" tab="分红配送" :style="panelStyle">
        <component :is="components.bonus" :code="currentShare" :contentHeight="contentHeight" />
      </Tabs.TabPane>
    </Tabs>
  </Suspense>
</template>
<script setup>
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { ref, inject, computed, defineAsyncComponent, watch, onMounted } from 'vue';
import { Form, Row, Col, Button, Select, Tabs } from 'ant-design-vue';
import { LeftOutlined } from '@ant-design/icons-vue';

const components = {
  chart: defineAsyncComponent(() => import('./components/Chart.vue')),
  company: defineAsyncComponent(() => import('./components/Company.vue')),
  skholders: defineAsyncComponent(() => import('./components/Skholders.vue')),
  topHolders: defineAsyncComponent(() => import('./components/TopHolders.vue')),
  income: defineAsyncComponent(() => import('./components/Income.vue')),
  bonus: defineAsyncComponent(() => import('./components/Bonus.vue'))
};

const $store = useStore();
const $route = useRoute();

const $http = inject('$http');
const $eventBus = inject('$eventBus');

const shares = ref([]);
const currentShare = ref('');
const contentHeight = ref(400);
const contentWidth = ref(800);

const panelStyle = computed(() => {
  return {
    minHeight: contentHeight.value + 'px',
    maxHeight: contentHeight.value + 'px'
  };
});

function loadShares () {
  $http.get('/api/shares/list').then(res => {
    shares.value.push(
      ...(res.datas || []).map(d => {
        return { label: d.Name, value: d.Code };
      })
    );
  });
}

function ResizeChartPanel (area) {
  contentWidth.value = area.width;
  contentHeight.value = area.height - 130;
}

watch($route, () => {
  if (!shares.value.find(s => s.value == $route.params.code)) {
    shares.value.push({ label: $route.query.title, value: $route.params.code });
  }

  currentShare.value = $route.params.code;
});

onMounted(() => {
  currentShare.value = $route.params.code;

  loadShares();
  ResizeChartPanel($store.state.area.content);

  $eventBus.on('windowResizeChanged', client => ResizeChartPanel(client));
});

function tabChanged (key) {
  if (key == 'trendChart') {
    // ResizeChartPanel($store.state.area.content);
  }
}
</script>

<style lang="less" scoped>
:deep(#cutdownContainer h3) {
  margin-bottom: 0;
  text-align: right;
  font-weight: bold;
  color: red;
  vertical-align: middle;
  display: inline-block;
}

.trendCanvas {
  width: 100%;
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  height: 480px;
  margin-top: 10px;

  >div {
    width: 100% !important;
  }
}

:deep(.table) {
  width: 100%;
  margin-bottom: 5px;
  background-color: white;

  >thead {
    cursor: default;

    >tr {
      line-height: 32px;
      vertical-align: middle;
      background-color: #f1f1f1;

      >th,
      >td {
        font-weight: bold;
        text-align: center;
        border: 1px solid #ddd;
      }
    }
  }

  >tbody {
    cursor: default;

    >tr {
      line-height: 26px;
      vertical-align: middle;

      >th {
        text-align: right;
        padding-right: 10px;
        width: 200px;
        border: 1px solid #ddd;
      }

      >td {
        padding-left: 10px;
        border: 1px solid #ddd;
      }
    }
  }
}
</style>
